<template>
    <section class="photo" :class="{rotate:rotate}">
        <div class="main">
            <img :src="value" @touchend="selectId">
            <input ref="file" type="file" alt="" accept="image/*" hidden @change="imgChange">
        </div>
        <div class="desc">
            <slot></slot>
        </div>
    </section>
</template>
<script>
export default {
    props: {
        value: null,
        rotate: {
            default: false
        },
        disabled: {
            default: false
        }
    },
    methods: {
        selectId(e) {
            if (!this.disabled) {
                e.preventDefault();
                this.$refs.file.click();
            }
            return false;
        },
        imgChange(e) {
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length) return;
            var file = files[0];
            if (typeof FileReader === 'undefined') {
                $dialog.alert({
                    content: '您的浏览器不支持图片上传'
                });
                return false;
            }
            var vm = this;
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                //添加压缩图片的处理
                var result = e.target.result;
                var img = new Image();
                img.onload = function (e) {
                    var naturalWidth = img.naturalWidth;
                    var naturalHeight = img.naturalHeight;
                    if (naturalWidth < naturalHeight) {
                        var width = 360;
                        var height = width * naturalHeight / naturalWidth;
                    } else {
                        var height = 360;
                        var width = height * naturalWidth / naturalHeight;
                    }
                    var canvas = document.createElement('canvas');
                    canvas.width = width;
                    canvas.height = height;
                    canvas.getContext("2d").drawImage(e.target, 0, 0, naturalWidth, naturalHeight, 0, 0, width, height);
                    var compressBase64 = canvas.toDataURL();
                    vm.$emit('input', compressBase64);
                }
                img.src = result;
            }
        },
    }
}
</script>
<style lang="scss" scoped>
@import '../../asset/scss/mixin/export.scss';
.photo {
    height: 3rem;
    @include flex;
    @include justify(space-between, justify);
    &:after {
        display: block;
        content: '';
        clear: both;
    }
    .desc {
        width: 4rem;
        @include flex;
        @include align(center, center);
    }
    .main {
        width: 3.4rem;
        @include flex;
        @include justify(center, center);
        @include align(center, center);
        img {
            // width: 3.4rem;
            width: auto;
            height: 2rem;
        }
        img.rotate {
            width: auto;
            height: 3.4rem;
            transform: rotate(-90deg);
        }
    }
}

.rotate {
    height: 3rem;
    .main {
        img {
            width: auto;
            height: 3.4rem;
            transform: rotate(-90deg);
        }
    }
}
</style>
